<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>在售降本考核车型分析</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="../styles/main.css">
    <style>
        .carousel-container {
            position: relative;
            padding: 0 60px;
            margin: 0 -20px;
            overflow: visible;
        }

        .carousel-track-container {
            overflow: hidden;
            position: relative;
        }

        .carousel-track {
            display: flex;
            transition: transform 0.3s ease;
            gap: 1rem;
            padding: 1rem 0;
        }

        .carousel-button {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 40px;
            height: 40px;
            background: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            cursor: pointer;
            transition: all 0.3s ease;
            z-index: 10;
        }

        .carousel-button:hover {
            background: #f3f4f6;
            transform: translateY(-50%) scale(1.1);
        }

        .carousel-button.prev {
            left: 20px;
        }

        .carousel-button.next {
            right: 20px;
        }

        .carousel-indicators {
            display: flex;
            justify-content: center;
            gap: 0.5rem;
            margin-top: 1rem;
        }

        .carousel-indicator {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: #e5e7eb;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .carousel-indicator.active {
            background: #3b82f6;
            transform: scale(1.2);
        }

        .carousel-controls {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 1rem;
        }

        .carousel-search {
            position: relative;
            width: 200px;
        }

        .carousel-search input {
            width: 100%;
            padding: 0.5rem 1rem;
            border: 1px solid #e5e7eb;
            border-radius: 0.5rem;
            padding-left: 2.5rem;
        }

        .carousel-search i {
            position: absolute;
            left: 0.75rem;
            top: 50%;
            transform: translateY(-50%);
            color: #6b7280;
        }

        .card {
            transition: transform 0.3s ease;
        }

        .card:hover {
            transform: translateY(-5px);
        }
    </style>
</head>

<body class="bg-white">
    <div class="p-6">
        <!-- 全局指标区 -->
        <div class="grid grid-cols-3 gap-6 mb-8">
            <!-- 在售降本考核车型总数 -->
            <div class="bg-blue-50 rounded-lg p-6">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-gray-600">年度降本考核车型总数</p>
                        <h3 class="text-3xl font-bold text-blue-600 mt-2">18</h3>
                    </div>
                    <div class="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center">
                        <i class="fas fa-car text-blue-500 text-xl"></i>
                    </div>
                </div>
            </div>

            <!-- 当月降额完成情况 -->
            <div class="bg-green-50 rounded-lg p-6">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-gray-600">当月降额完成情况 <i class="fas fa-info-circle text-blue-500 cursor-help"
                                title="当月降额完成情况 = 当月已完成降额 ÷ 当月目标降额"></i></p>
                        <h3 class="text-3xl font-bold text-green-600 mt-2">39/50</h3>
                    </div>
                    <div class="w-12 h-12 bg-green-100 rounded-full flex items-center justify-center">
                        <i class="fas fa-chart-line text-green-500 text-xl"></i>
                    </div>
                </div>
            </div>

            <!-- 年度累计降本达成情况 -->
            <div class="bg-purple-50 rounded-lg p-6">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-gray-600">年度累计降本达成情况 <i class="fas fa-info-circle text-blue-500 cursor-help"
                                title="年度累计降本达成情况 = 年度累计完成降额 ÷ 年度目标降额"></i></p>
                        <h3 class="text-3xl font-bold text-purple-600 mt-2">85/100</h3>
                    </div>
                    <div class="w-12 h-12 bg-purple-100 rounded-full flex items-center justify-center">
                        <i class="fas fa-chart-bar text-purple-500 text-xl"></i>
                    </div>
                </div>
            </div>
        </div>

        <!-- 重点车型卡片组 -->
        <div class="mb-6">
            <div class="carousel-controls">
                <h3 class="text-lg font-semibold text-gray-800">重点车型</h3>
            </div>
            <div class="carousel-container">
                <div class="carousel-track-container">
                    <button class="carousel-button prev" onclick="slideCarousel('prev')">
                        <i class="fas fa-chevron-left text-gray-600"></i>
                    </button>
                    <div class="carousel-track" id="carouselTrack">
                        <!-- 车型卡片 1 -->
                        <div class="card bg-white rounded-lg shadow-md p-6 min-w-[320px]">
                            <div class="flex justify-between items-start mb-4">
                                <h4 class="text-lg font-semibold text-gray-800">车型X</h4>
                                <span class="px-3 py-1 bg-green-100 text-green-600 rounded-full text-sm">热销</span>
                            </div>
                            <div class="space-y-4">
                                <div>
                                    <p class="text-sm text-gray-600 mb-1">降额达成率</p>
                                    <div class="w-full bg-gray-200 rounded-full h-2.5">
                                        <div class="bg-green-600 h-2.5 rounded-full" style="width: 90%"></div>
                                    </div>
                                    <p class="text-sm text-gray-600 mt-1">90%</p>
                                </div>
                                <div class="grid grid-cols-2 gap-4">
                                    <div>
                                        <p class="text-sm text-gray-600">本月降幅</p>
                                        <p class="text-lg font-semibold text-green-600">-6.8%</p>
                                    </div>
                                    <div>
                                        <p class="text-sm text-gray-600">目标降额</p>
                                        <p class="text-lg font-semibold text-blue-600">-12,345.68元</p>
                                    </div>
                                    <div>
                                        <p class="text-sm text-gray-600">同比降幅</p>
                                        <p class="text-lg font-semibold text-purple-600">-5.2%</p>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- 车型卡片 2 -->
                        <div class="card bg-white rounded-lg shadow-md p-6 min-w-[320px]">
                            <div class="flex justify-between items-start mb-4">
                                <h4 class="text-lg font-semibold text-gray-800">车型Y</h4>
                                <span class="px-3 py-1 bg-green-100 text-green-600 rounded-full text-sm">热销</span>
                            </div>
                            <div class="space-y-4">
                                <div>
                                    <p class="text-sm text-gray-600 mb-1">降额达成率</p>
                                    <div class="w-full bg-gray-200 rounded-full h-2.5">
                                        <div class="bg-green-600 h-2.5 rounded-full" style="width: 82%"></div>
                                    </div>
                                    <p class="text-sm text-gray-600 mt-1">82%</p>
                                </div>
                                <div class="grid grid-cols-2 gap-4">
                                    <div>
                                        <p class="text-sm text-gray-600">本月降幅</p>
                                        <p class="text-lg font-semibold text-green-600">-5.5%</p>
                                    </div>
                                    <div>
                                        <p class="text-sm text-gray-600">目标降额</p>
                                        <p class="text-lg font-semibold text-blue-600">-10,987.65元</p>
                                    </div>
                                    <div>
                                        <p class="text-sm text-gray-600">同比降幅</p>
                                        <p class="text-lg font-semibold text-purple-600">-4.8%</p>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- 车型卡片 3 -->
                        <div class="card bg-white rounded-lg shadow-md p-6 min-w-[320px]">
                            <div class="flex justify-between items-start mb-4">
                                <h4 class="text-lg font-semibold text-gray-800">车型Z</h4>
                                <span class="px-3 py-1 bg-green-100 text-green-600 rounded-full text-sm">热销</span>
                            </div>
                            <div class="space-y-4">
                                <div>
                                    <p class="text-sm text-gray-600 mb-1">降额达成率</p>
                                    <div class="w-full bg-gray-200 rounded-full h-2.5">
                                        <div class="bg-green-600 h-2.5 rounded-full" style="width: 88%"></div>
                                    </div>
                                    <p class="text-sm text-gray-600 mt-1">88%</p>
                                </div>
                                <div class="grid grid-cols-2 gap-4">
                                    <div>
                                        <p class="text-sm text-gray-600">本月降幅</p>
                                        <p class="text-lg font-semibold text-green-600">-7.2%</p>
                                    </div>
                                    <div>
                                        <p class="text-sm text-gray-600">目标降额</p>
                                        <p class="text-lg font-semibold text-blue-600">-15,432.11元</p>
                                    </div>
                                    <div>
                                        <p class="text-sm text-gray-600">同比降幅</p>
                                        <p class="text-lg font-semibold text-purple-600">-6.0%</p>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- 车型卡片 4 -->
                        <div class="card bg-white rounded-lg shadow-md p-6 min-w-[320px]">
                            <div class="flex justify-between items-start mb-4">
                                <h4 class="text-lg font-semibold text-gray-800">车型A</h4>
                                <span class="px-3 py-1 bg-green-100 text-green-600 rounded-full text-sm">热销</span>
                            </div>
                            <div class="space-y-4">
                                <div>
                                    <p class="text-sm text-gray-600 mb-1">降额达成率</p>
                                    <div class="w-full bg-gray-200 rounded-full h-2.5">
                                        <div class="bg-green-600 h-2.5 rounded-full" style="width: 75%"></div>
                                    </div>
                                    <p class="text-sm text-gray-600 mt-1">75%</p>
                                </div>
                                <div class="grid grid-cols-2 gap-4">
                                    <div>
                                        <p class="text-sm text-gray-600">本月降幅</p>
                                        <p class="text-lg font-semibold text-green-600">-4.5%</p>
                                    </div>
                                    <div>
                                        <p class="text-sm text-gray-600">目标降额</p>
                                        <p class="text-lg font-semibold text-blue-600">-9,876.54元</p>
                                    </div>
                                    <div>
                                        <p class="text-sm text-gray-600">同比降幅</p>
                                        <p class="text-lg font-semibold text-purple-600">-3.8%</p>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- 车型卡片 5 -->
                        <div class="card bg-white rounded-lg shadow-md p-6 min-w-[320px]">
                            <div class="flex justify-between items-start mb-4">
                                <h4 class="text-lg font-semibold text-gray-800">车型B</h4>
                                <span class="px-3 py-1 bg-green-100 text-green-600 rounded-full text-sm">热销</span>
                            </div>
                            <div class="space-y-4">
                                <div>
                                    <p class="text-sm text-gray-600 mb-1">降额达成率</p>
                                    <div class="w-full bg-gray-200 rounded-full h-2.5">
                                        <div class="bg-green-600 h-2.5 rounded-full" style="width: 92%"></div>
                                    </div>
                                    <p class="text-sm text-gray-600 mt-1">92%</p>
                                </div>
                                <div class="grid grid-cols-2 gap-4">
                                    <div>
                                        <p class="text-sm text-gray-600">本月降幅</p>
                                        <p class="text-lg font-semibold text-green-600">-8.2%</p>
                                    </div>
                                    <div>
                                        <p class="text-sm text-gray-600">目标降额</p>
                                        <p class="text-lg font-semibold text-blue-600">-16,543.21元</p>
                                    </div>
                                    <div>
                                        <p class="text-sm text-gray-600">同比降幅</p>
                                        <p class="text-lg font-semibold text-purple-600">-7.5%</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <button class="carousel-button next" onclick="slideCarousel('next')">
                        <i class="fas fa-chevron-right text-gray-600"></i>
                    </button>
                </div>
                <div class="carousel-indicators" id="carouselIndicators"></div>
            </div>
        </div>
    </div>

    <script>
        let currentPosition = 0;
        const cardWidth = 320; // 卡片宽度
        const gap = 16; // 卡片间距
        const visibleCards = 3; // 可见卡片数量

        // 初始化指示器
        function initializeIndicators() {
            const track = document.getElementById('carouselTrack');
            const indicators = document.getElementById('carouselIndicators');
            const totalCards = track.children.length;
            const totalGroups = Math.ceil(totalCards / visibleCards);

            for (let i = 0; i < totalGroups; i++) {
                const indicator = document.createElement('div');
                indicator.className = 'carousel-indicator' + (i === 0 ? ' active' : '');
                indicator.onclick = () => jumpToGroup(i);
                indicators.appendChild(indicator);
            }
        }

        // 更新指示器状态
        function updateIndicators() {
            const indicators = document.querySelectorAll('.carousel-indicator');
            const currentGroup = Math.round(Math.abs(currentPosition) / ((cardWidth + gap) * visibleCards));
            indicators.forEach((indicator, index) => {
                indicator.classList.toggle('active', index === currentGroup);
            });
        }

        // 跳转到指定组
        function jumpToGroup(groupIndex) {
            currentPosition = -(cardWidth + gap) * (groupIndex * visibleCards);
            const track = document.getElementById('carouselTrack');
            track.style.transform = `translateX(${currentPosition}px)`;
            updateIndicators();
        }

        // 跳转到指定卡片
        function jumpToCard(cardIndex) {
            if (!cardIndex) return;
            const groupIndex = Math.floor(cardIndex / visibleCards);
            jumpToGroup(groupIndex);
        }

        // 过滤卡片
        function filterCards(searchText) {
            const cards = document.querySelectorAll('.card');
            const track = document.getElementById('carouselTrack');

            if (!searchText) {
                // 如果搜索框为空，显示所有卡片并重置轮播位置
                cards.forEach(card => {
                    card.style.display = '';
                });
                currentPosition = 0;
                track.style.transform = `translateX(0)`;
                updateIndicators();
                return;
            }

            let hasVisibleCard = false;
            let firstVisibleIndex = 0;
            searchText = searchText.toLowerCase().trim();

            cards.forEach((card, index) => {
                const title = card.querySelector('h4').textContent.toLowerCase();
                // 使用更精确的匹配方式
                const matches = title.indexOf(searchText) !== -1;

                if (matches) {
                    card.style.display = '';
                    if (!hasVisibleCard) {
                        hasVisibleCard = true;
                        firstVisibleIndex = index;
                    }
                } else {
                    card.style.display = 'none';
                }
            });

            // 将匹配的卡片滚动到可见区域
            if (hasVisibleCard) {
                const groupIndex = Math.floor(firstVisibleIndex / visibleCards);
                currentPosition = -(cardWidth + gap) * (groupIndex * visibleCards);
                track.style.transform = `translateX(${currentPosition}px)`;
                updateIndicators();
            } else {
                // 如果没有匹配的卡片，重置位置
                currentPosition = 0;
                track.style.transform = `translateX(0)`;
                updateIndicators();
            }
        }

        function slideCarousel(direction) {
            const track = document.getElementById('carouselTrack');
            const maxPosition = -(cardWidth + gap) * (track.children.length - visibleCards);

            if (direction === 'next') {
                currentPosition = Math.max(currentPosition - (cardWidth + gap) * visibleCards, maxPosition);
            } else {
                currentPosition = Math.min(currentPosition + (cardWidth + gap) * visibleCards, 0);
            }

            track.style.transform = `translateX(${currentPosition}px)`;
            updateIndicators();
        }

        // 初始化
        window.onload = function () {
            initializeIndicators();
        };
    </script>
</body>

</html>